//定义变量存储分页数据
//当前页码数
var pageNo = 1;
//每页显示记录数
var pageSize = 3;
//总页数
var lastPage=0;
//定义数组存放满足条件过滤的数据
var searchArr = [];

/**
 * 初始化数据
 */
function initData() {
    var stuData = "[{\"stuNo\":\"1001\",\"stuName\":\"zhangsan\",\"gradeName\":\"一年级\"},{\"stuNo\":\"1002\",\"stuName\":\"lisi\",\"gradeName\":\"二年级\"},{\"stuNo\":\"1003\",\"stuName\":\"wangwu\",\"gradeName\":\"三年级\"},{\"stuNo\":\"1004\",\"stuName\":\"zhaoliu\",\"gradeName\":\"一年级\"},{\"stuNo\":\"1005\",\"stuName\":\"tianqi\",\"gradeName\":\"二年级\"},{\"stuNo\":\"1006\",\"stuName\":\"sunba\",\"gradeName\":\"三年级\"},{\"stuNo\":\"1007\",\"stuName\":\"zhangjiu\",\"gradeName\":\"一年级\"},{\"stuNo\":\"1008\",\"stuName\":\"zhengshi\",\"gradeName\":\"三年级\"},{\"stuNo\":\"1009\",\"stuName\":\"taiji\",\"gradeName\":\"一年级\"},{\"stuNo\":\"1010\",\"stuName\":\"wuxing\",\"gradeName\":\"三年级\"}]";
    sessionStorage.setItem("stuData", stuData);
    var gradeData = "[{\"gradeId\":\"1\",\"gradeName\":\"一年级\"},{\"gradeId\":\"2\",\"gradeName\":\"二年级\"},{\"gradeId\":\"3\",\"gradeName\":\"三年级\"}]";
    sessionStorage.setItem("gradeData", gradeData);

    //第一次加载时，条件数据就是所有数据
    searchArr = JSON.parse(stuData);

    //渲染年级下拉列表
    loadGrade();
    //渲染学生表格
    loadStudent(sessionStorage.getItem("stuData"));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    //总记录数
    var total = JSON.parse(stuData).length;
    //总页数
    lastPage = Math.ceil(total / pageSize); 
    document.getElementById("lp").innerText=lastPage;
}

/**
 * 加载渲染年级数据
 */
function loadGrade(){
   var data = sessionStorage.getItem("gradeData");
   var jsonArr = JSON.parse(data);
   for(var i=0; i<jsonArr.length; i++){
        //创建option项
        var opt = document.createElement("option");
        opt.value = jsonArr[i].gradeId;
        opt.innerText = jsonArr[i].gradeName;
        //添加到select中
        document.getElementById("nj").appendChild(opt);
        document.getElementById("cengNj").appendChild(opt.cloneNode(true));
   }
}

/**
 * 加载渲染学生数据
 */
function loadStudent(data){
    //var data = sessionStorage.getItem("stuData");
    //加分页渲染
    var objArr = JSON.parse(data).slice((pageNo-1)*pageSize, pageNo*pageSize);
    //循环渲染
    for (var i = 0; i < objArr.length; i++) {
        createTableNodes(objArr[i]);
    }
}

/**
 * 创建并渲染表格内数据 【分页后废弃】
 */
function createTableNodes(obj){
    //创建行
    var tr = document.createElement("tr");
    //创建单元格
    var td1 = document.createElement("td");
    td1.innerText = obj.stuNo;
    var td2 = document.createElement("td");
    td2.innerText = obj.stuName;
    var td3 = document.createElement("td");
    td3.innerText = obj.gradeName;
    var td4 = document.createElement("td");
    td4.style.textAlign="center";
    td4.innerHTML = "<a href='javascript:void(0)' onclick='updateRow(this)'>修改</a>&nbsp;<a href='javascript:void(0)' onclick='deleteRow(this)'>删除</a>";
    //td添加到tr中
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    //tr添加到tbody中
    document.getElementById("gwc").appendChild(tr);
}

/**
 * 清除脏数据
 */
function clearData(){
    //清除脏数据
    var arr = document.getElementById("gwc").children;
    for(var i=arr.length-1; i>=1; i--){
        arr[i].remove();
    }
}

/**
 * 查询按钮触发事件
 */
function search() {
    //清除脏数据
    clearData();
    //获取条件
    var xh = document.getElementById("xh").value;
    var xm = document.getElementById("xm").value;
    var nj = "";
    var njxs = document.getElementById("nj").children;
    for(var i=0; i<njxs.length; i++){
        if(njxs[i].selected){
            nj = njxs[i].innerText;
            break;
        }
    }
    //console.log(xh,xm,nj);
    //原始数据
    var data = sessionStorage.getItem("stuData");
    var objArr = JSON.parse(data);

    //清除查询数据
    searchArr = [];

    //遍历数据
    for (let i = 0; i < objArr.length; i++) {
        if(xh && xm && nj != "--请选择--" ){//三个条件都有
            //根据三个条件过滤
            if(objArr[i].stuNo == xh && objArr[i].stuName.indexOf(xm) != -1 && objArr[i].gradeName == nj){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else if(xh && xm ){//任意两个条件有
            //学号和姓名满足时
            if(objArr[i].stuNo == xh && objArr[i].stuName.indexOf(xm) != -1 ){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else if(xh && nj != "--请选择--"){//任意两个条件有
            //学号和年级满足时
            if(objArr[i].stuNo == xh && objArr[i].gradeName == nj ){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else if(xm && nj != "--请选择--"){//任意两个条件有
            //姓名和年级满足时
            if(objArr[i].stuName.indexOf(xm) != -1 && objArr[i].gradeName == nj ){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else if(xh){//任意一个条件有
            if(objArr[i].stuNo == xh){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else if(xm){//任意一个条件有
            if(objArr[i].stuName.indexOf(xm) != -1 ){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else if(nj != "--请选择--"){//任意一个条件有
            if(objArr[i].gradeName == nj ){
                searchArr.push(objArr[i]);
                //createTableNodes(objArr[i]);
            }
        }else{
            //没条件加所有
            searchArr.push(objArr[i]);
            //createTableNodes(objArr[i]);
        }
    }
    //页码数为1
    pageNo=1;
    //总记录数
    var total = searchArr.length;
    //总页数
    lastPage = Math.ceil(total / pageSize); 

    document.getElementById("pn").innerText=pageNo;
    document.getElementById("lp").innerText=lastPage;

    //渲染到页面
    loadStudent(JSON.stringify(searchArr));
}

/**
 * 删除指定行对应数据
 */
function deleteRow(obj){
    if(confirm("确定删除吗？")){
        //获取唯一学号
        var xh = obj.parentNode.parentNode.firstElementChild.innerText;
        //原始数据
        var data = sessionStorage.getItem("stuData");
        var objArr = JSON.parse(data);
        //遍历数据
        for (var i = 0; i < objArr.length; i++) {
            if(objArr[i].stuNo == xh){
                objArr.splice(i,1);
                sessionStorage.setItem("stuData",JSON.stringify(objArr));
                break;
            }
        }
        //清除脏数据
        clearData();
        //清除条件
        document.getElementById("xh").value="";
        document.getElementById("xm").value="";
        document.getElementById("nj").value="-1";
        //更改页码为第一页
        pageNo=1
        //渲染学生表格
        loadStudent(sessionStorage.getItem("stuData"));
        

    }
}

/**
 * 新增按钮触发事件
 */
function insert(){
    //更改文本
    document.getElementById("bt").innerText = "新增信息";
    //学号可读可写
    document.getElementById("stuNo").removeAttribute("readonly");
    //清空数据
    document.getElementById("stuNo").value="";
    document.getElementById("stuName").value="";
    document.getElementById("cengNj").value=-1;
    
    document.getElementById("zhezhao").style.display="block";
    document.getElementById("ceng").style.display="block";
}

/**
 * 取消按钮触发事件
 */
function cancel(){
    document.getElementById("zhezhao").style.display="none";
    document.getElementById("ceng").style.display="none";
}

/**
 * 保存按钮触发事件
 */
function save(){
    //获取数据
    var stuNo = document.getElementById("stuNo").value;
    var stuName = document.getElementById("stuName").value;
    var cengNj = document.getElementById("cengNj").value;
    var nj = "";
    var njxs = document.getElementById("cengNj").children;
    for(var i=0; i<njxs.length; i++){
        if(njxs[i].selected){
            nj = njxs[i].innerText;
            break;
        }
    }
    //原始数据
    var data = sessionStorage.getItem("stuData");
    var objArr = JSON.parse(data);

    //区分新增/修改
    if(document.getElementById("bt").innerText == "新增信息"){
        //拼json
        var stuInfo = "{\"stuNo\":\""+stuNo+"\",\"stuName\":\""+stuName+"\",\"gradeName\":\""+nj+"\"}";
        //var stuInfo = `{"stuNo":"${stuNo}","stuName":"${stuName}","gradeName":"${nj}"}`;
        var json = JSON.parse(stuInfo);
        //添加到数组中
        objArr.push(json);
        
    }else{
        //修改信息
        for(var i=0; i<objArr.length; i++){
            if(objArr[i].stuNo == stuNo){
                objArr[i].stuName = stuName
                objArr[i].gradeName = nj;
                break;
            }
        }
    }
    //存储到浏览器中
    sessionStorage.setItem("stuData",JSON.stringify(objArr));

    //清除脏数据
    clearData();
    //清除条件
    document.getElementById("xh").value="";
    document.getElementById("xm").value="";
    document.getElementById("nj").value="-1";
    //更改页码为第一页
    pageNo=1
    //渲染学生表格
    loadStudent(sessionStorage.getItem("stuData"));
    //隐藏层
    cancel();
}

/**
 * 修改按钮触发事件
 * @param obj 
 */
function updateRow(obj){
    //更改文本
    document.getElementById("bt").innerText = "修改信息";
    //学号只读
    document.getElementById("stuNo").setAttribute("readonly","readonly");
    //获取数据
    var xh = obj.parentNode.parentNode.firstElementChild.innerText;
    //原始数据
    var data = sessionStorage.getItem("stuData");
    var objArr = JSON.parse(data);
    
    var gradeId = -1;
    var njxs = document.getElementById("cengNj").children;
    //循环判断
    for(let i=0; i<objArr.length; i++){
        if(objArr[i].stuNo == xh){
            document.getElementById("stuNo").value = objArr[i].stuNo;
            document.getElementById("stuName").value = objArr[i].stuName;
            
            for(let j=0; j<njxs.length; j++){
                if(njxs[j].innerText == objArr[i].gradeName){
                    gradeId = njxs[j].value;
                    break;
                }
            }
            document.getElementById("cengNj").value = gradeId;
        }
    }
    document.getElementById("zhezhao").style.display="block";
    document.getElementById("ceng").style.display="block";
}

/**
 * 首页点击触发事件
 */
function firstPageFn(){
    //设置当前页码为1
    pageNo = 1;
    //清除脏数据
    clearData();
    //重新渲染学生表格
    loadStudent(JSON.stringify(searchArr));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    document.getElementById("lp").innerText=lastPage;
}

/**
 * 上一页点击触发事件
 */
function prevPageFn(){
    //设置当前页码为上一页
    pageNo -= 1;
    if(pageNo < 1){
        pageNo = 1;
    }
    //清除脏数据
    clearData();
    //重新渲染学生表格
    loadStudent(JSON.stringify(searchArr));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    document.getElementById("lp").innerText=lastPage;
}

/**
 * 下一页点击触发事件
 */
 function nextPageFn(){
    //设置当前页码为下一页
    pageNo += 1;
    if(pageNo > lastPage){
        pageNo = lastPage;
    }
    //清除脏数据
    clearData();
    //重新渲染学生表格
    loadStudent(JSON.stringify(searchArr));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    document.getElementById("lp").innerText=lastPage;
}

/**
 * 末页点击触发事件
 */
 function lastPageFn(){
    //设置当前页码为末页
    pageNo = lastPage;
    //清除脏数据
    clearData();
    //重新渲染学生表格
    loadStudent(JSON.stringify(searchArr));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    document.getElementById("lp").innerText=lastPage;
}

var divObj;
/**
 * 跳转指定页点击触发事件
 */
 function gotoPageFn(){
    //设置当前页码为末页
    var num = document.getElementById("currentPage").value;
    if(num != parseInt(num) || num > lastPage){
        divObj = document.createElement("div");
        divObj.innerText="格式为1-"+lastPage+"的整数！";
        divObj.style.border="1px black solid";
        divObj.style.width="160px";
        divObj.style.lineHeight="30px";
        divObj.style.textAlign="center";
        divObj.style.backgroundColor = "white";
        divObj.style.position = "absolute";
        divObj.style.top = "100px";
        divObj.style.left = "50%";
        divObj.style.transform="translateX(-50%)";
        document.body.appendChild(divObj);
        document.getElementById("currentPage").value = "";
        window.setTimeout("clearDivTS()",1000);
    }else{
        pageNo = num;
    }

    //清除脏数据
    clearData();
    //重新渲染学生表格
    loadStudent(JSON.stringify(searchArr));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    document.getElementById("lp").innerText=lastPage;
}

/**
 * 消除提示框
 */
function clearDivTS(){
    console.log(divObj);
    divObj.remove()
}

/**
 * 下拉列表选项改变事件
 */
function changePageSize(obj){
    //页码数为1
    pageNo = 1;
    //更改每页显示记录数
    pageSize = obj.value;
    //清除脏数据
    clearData();
    //清除条件
    document.getElementById("xh").value="";
    document.getElementById("xm").value="";
    document.getElementById("nj").value="-1";
    //更改页码为第一页
    pageNo=1
    //渲染学生表格
    loadStudent(sessionStorage.getItem("stuData"));
    //searchArr = JSON.parse(sessionStorage.getItem("stuData"));

    //渲染分页界面
    document.getElementById("pn").innerText=pageNo;
    //总记录数
    var stuData = sessionStorage.getItem("stuData");
    var total = JSON.parse(stuData).length;
    //总页数
    lastPage = Math.ceil(total / pageSize); 
    document.getElementById("lp").innerText=lastPage;
}